<template>
    <div class="login">
      <el-form v-model="login" style="width: 400px;padding-top: 80px;margin-left: 40px;"
      ref="numberValidateForm" label-width="100px" class="demo-ruleForm" :rules="rules">
        <el-form-item label="用户名" prop="username">
            <el-input  v-model="login.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" > 
            <el-input type="password" v-model="login.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="jump">登录</el-button>
            <el-button type="primary" @click="jump2">注册</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {post}from '../utils/fecth'
export default ({
    name:'login',
    data(){
        
    var validatename = (rule, value, callback) => {
        if (value ==='') {
            console.log(value)
            return callback(new Error('用户名不能为空'));
        }else{
            console.log(value)
        }
    };
    // var validatePass = (rule, value, callback) => {
    //     console.log(rule)
    //     setTimeout(()=>{  
    //     if (value) {
    //         console.log(111)
    //     return callback(new Error('密码不能为空'));
    //     }else if(value !==''){
    //         callback();
    //     }
    //     // if(value.length<6){
    //     //     callback(new Error('长度不能小于6位'))
    //     // }
    // },100)
    // };
        return{
            login:{},
            rules: {
                // password: [
                //     { validator: validatePass, trigger: 'blur' }
                // ],
                username: [
                    { validator: validatename, trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        async jump(){
            const data = await post('user/login',{ 
                username:this.login.username,
                password:this.login.password,})
            if(data.success == true){
                this.$store.userInfo = data.user
                localStorage.setItem('A',JSON.stringify(data.user))
                this.$router.push({
                    name:'backstage'
                })
                // console.log(this.$store.userInfo)
            }
            console.log(data)
        },
        jump2(){
            this.$router.push({
                name:'regist'
            })
        }
    }
})
</script>
<style >
.login{
    height: 350px;
    width: 550px;
    box-shadow: 0 0 6px #333;
    margin: 100px auto;
}
</style>